<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="信息搜索">
						<el-input v-model="state.param.keywords" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon>
							搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重 置
						</el-button>
						<el-button type="primary" @click="add('add',{})">
							<el-icon>
								<ele-Plus />
							</el-icon>
							新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="display: flex; flex-direction: column; flex: 1; height: inherit">
					<el-table :data="state.tableData">
						<!-- seckillId -->
						<el-table-column prop="seckillId" label="ID"></el-table-column>
						<el-table-column prop="title" label="配置" show-overflow-tooltip width="200">
							<template #default="scope">
								<div class="twoRows">
									<span>
										{{ scope.row.storeSeckillManagerResponse?.seckillManagerStatusName}}
									</span>
									<span>
										{{ scope.row.seckillStartTime.replace(/-/g,'/') + '-' + scope.row.seckillStopTime.replace(/-/g,'/') }}
									</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="seckillTimeId" label="秒杀时段" width="110">
							<template #default="scope">
								{{ scope.row.storeSeckillManagerResponse?.seckillManagerTime.replace(',','-') }}
							</template>
						</el-table-column>
						<el-table-column label="图片" width="90">
							<template #default="scope">
								<div style="display: flex;justify-content:center;align-items: center;">
									<el-image style="width:32px; height: 32px;" :src="scope.row.seckillImage"
										fit="cover" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="seckillTitle" label="商品名称" show-overflow-tooltip width="380" class-name="textLeft">
							<template #default="scope">
								<span class="text">
									{{ scope.row.seckillTitle }}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="seckillOtPrice" label="原价" width="100"></el-table-column>
						<el-table-column prop="seckillPrice" label="秒杀价" width="100"></el-table-column>
						<el-table-column prop="seckillQuotaShow" label="限量" show-overflow-tooltip></el-table-column>
						<el-table-column prop="seckillQuota" label="限量剩余" width="110"></el-table-column>
						<el-table-column prop="killStatusName" label="秒杀状态" width="110"></el-table-column>
						<el-table-column label="启用状态" width="110">
							<template #default="scope">
								<el-switch v-model="scope.row.seckillStatus" :active-value="1" :inactive-value="0" @change="statusChange(scope.row)"/>
							</template>
						</el-table-column>
						<el-table-column  label="创建时间" show-overflow-tooltip width="200">
							<template #default="scope">
								<el-tooltip
									class="box-item"
									effect="dark"
									:content="comTimeChange(scope.row.seckillCreateTime, 1)"
									placement="top-start"
								>
								{{ comTimeChange(scope.row.seckillCreateTime, 2) }}
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="120">
							<template #default="scope">
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="onOpenEdit(scope.row)"> 编辑 </span>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<el-dropdown>
									<span style="color:var(--el-color-primary);" class="pointer font16"> 操作 </span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="onOpenDetail(scope.row)">添加商品</el-dropdown-item>
											<el-dropdown-item @click="onRowDel(scope.row)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
				</section>
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
							:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.current" background
							v-model:page-size="state.param.size" layout="total, sizes, prev, pager, next, jumper"
							:total="state.total">
						</el-pagination>
					</el-col>
				</el-row>
			</el-card>
		</div>
        <!-- <addCategoryDialog ref="addCategoryDialogRef" @refresh="getOrderList()" /> -->
		<GoodsIntoShow></GoodsIntoShow>
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive,onMounted,ref, defineAsyncComponent, computed} from 'vue';
import { useRouter } from 'vue-router';
import type { saleOrderListData } from "/@/types/marketing";
import { seckillGoodsList, schemeDel, changeSeckillGoodsStatus } from '/@/api/marketing';
import { ElMessageBox, ElMessage } from 'element-plus';
const GoodsIntoShow = defineAsyncComponent(() => import('@/components/dialog/goodsIntoShow.vue'));
const router = useRouter();
// 定义变量内容
const state = reactive({
	param: {
		keywords: "",
		current: 1,
		size: 10,  //这样就可以了， 但是这个不是自动切换得嘛 上面绑定了值
	},
	query: {
		orderStatus: [
			{ value: 0, label: '进行中' },
			{ value: 2, label: '已过期' },
			{ value: 3, label: '已删除' }
		],
	},
	loading: false,
	total: 0,
	tableData: [] as Array<saleOrderListData>
});
onMounted(() => {
	getGoodsList();
})

//时间戳转时间

const timestampToTime = (timestamp: number, n:number) => {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');
  const second = date.getSeconds().toString().padStart(2, '0');
  if(n == 1){
	return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  } else if(n == 2){
	return `${year}-${month}-${day}`;
  }
  
}

const comTimeChange = computed(()=>{
	return function(val:number, n:number){
		return timestampToTime(val, n);
	}
})

// 修改状态
const statusChange = (obj : any) => {
	changeSeckillGoodsStatus(obj.seckillId,obj.seckillStatus).then(res =>{
		if(res.code == 400){
			ElMessage.success('修改成功');
		}
	})
}
//刷新列表
const getOrderList = () => {
	getGoodsList();
}
// 获取订单列表
const getGoodsList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	// 对
	const { results } = await seckillGoodsList(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.records.length < state.param.size ? results.records.length : results.size;
}

// 搜索
const search = () => {
	state.param.current = 1;
	getGoodsList()
}

// 打开新增编辑分类弹窗
const add = (type: string, row ?: Object) => {
    router.push({
        path: '/marketing/seckillManage/goods/add',
	});
};
 


// 订单详情
const onOpenDetail = (item: any) => {
	console.log(item.id)
	router.push({
		path: '/order/sale/details',
		query: { id: item.id },
	});
};

// 订单详情
const onOpenEdit = (item: any) => {
	console.log(item.id)
	router.push({
		path: '/order/sale/details',
		query: { id: item.id },
	});
};


// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.size = val;
	getGoodsList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.current = val;
	getGoodsList();
};


// 删除活动
const onRowDel = (row:any) => {
	ElMessageBox.confirm(`此操作将永久删除该活动，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		let res = await schemeDel(row.id);
		ElMessage.success('删除成功');
	}).catch(() => {
		ElMessage.info('已取消');
	});
};


</script>
<style scoped lang="scss">
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table {
		flex: 1;
		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
.ellSetWidth{
	width: 380px !important;
}
.twoRows{
	width: 100%;
	display: flex;
	display: -webkit-flex;
	align-items: flex-start !important;
	flex-direction: column;
}
.textLeft{
	.text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-all;
	}
}
:deep(.el-table .textLeft .cell.el-tooltip ){
	justify-content: flex-start !important;
}
:deep(.el-table th.textLeft .cell ){
	justify-content: flex-start !important;
	padding: 0 !important;
}
</style>
<style>
.el-table.is-scrolling-right th.el-table-fixed-column--right{
	background-color: var(--el-color-primary-light-8) !important;
}
</style>
